<template>
    <section>
        <!--树区域-->
        <el-col :span="6" v-loading="treeLoading">
            <el-button type="primary" icon="el-icon-plus"
                       :disabled="currentNode && currentNode.node.level==3"
                       @click="addNodeVisible=true;nodeForm={};"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delNode"></el-button>
            <el-input v-model.trim="filterText" placeholder="输入关键字" clearable @keyup.enter.native="searchTree" style="margin: 10px 0">
                <el-button slot="append" icon="el-icon-search" @click="searchTree"></el-button>
            </el-input>
            <!--菜单栏-->
            <el-tree id="tree-box" ref="treeBox" :data="data"
                 node-key="id"
                 @node-click="clickNode"
                 highlight-current
                :filter-node-method="filterTreeNode"
                :props="props"
                :expand-on-click-node="false">
            </el-tree>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <!--节点属性-->
        <el-col :span="16" v-loading="contentLoading">
            <el-form id="content-box" @submit.native.prevent style="margin-bottom:10px;overflow-y: auto;">
                <el-card class="box-card" v-if="form.id">
                    <div slot="header" class="clearfix">
                        <span>菜单属性</span>
                        <el-button v-if="form.id" type="text" icon="el-icon-check" style="float: right; padding: 3px 0" @click="handleSubmit">保存</el-button>
                    </div>
                    <el-form-item label="节点名称">
                        <el-input size="small" v-model="form.title" style="width: 60%;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="菜单路由">
                        <el-input size="small" v-model="form.path" style="width: 60%;" placeholder="path" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="菜单图标">
                        <el-input size="small" v-model="form.icon" style="width: 60%;" placeholder="icon" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="路由等级">
                        <el-input size="small" v-model="form.lie" style="width: 60%;" placeholder="level" clearable></el-input>
                    </el-form-item>
                </el-card>
            </el-form>

        </el-col>

        <!--新增节点-->
        <Modal v-model="addNodeVisible" title="新增【节点】" width="500px" :loading="true" :mask-closable="false">
            <el-form label-width="90px" @submit.native.prevent>
                <el-form-item label="父节点">
                    <el-input disabled size="small" :value="(currentNode ? currentNode.obj.title: '根节点')"></el-input>
                </el-form-item>
                <el-form-item label="子节点">
                    <el-input v-model.trim="nodeForm.label" size="small" placeholder="请输入子节点名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="菜单路由">
                    <el-input v-model.trim="nodeForm.path" size="small" placeholder="请输入菜单路由" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <i-button @click="addNodeVisible=false;">退出</i-button>
                <i-button type="primary" :loading="btnLoading" @click="addNode">提交</i-button>
            </div>
        </Modal>
    </section>
</template>
<script>

import {menuTree,saveMenuNode,addMenuNode,delMenuNode} from "@/api/sys/menu";

export default {
    data() {
        return {
            props: {
                label: "title"
            },
            data: [],
            nodeForm: {},
            form: {},
            currentNode: null,
            treeLoading: false,
            btnLoading: false,
            contentLoading: false,
            filterText: '',
            addNodeVisible: false,
        }
    },
    watch:{

    },
    methods: {
        //Enter查询树节点
        searchTree(){
            if(this.filterText != ""){
                this.$refs.treeBox.filter(this.filterText);
            }else{
                this.getTree();
            }
            this.form = {};
        },
        //树节点过滤函数
        filterTreeNode(value, data){
            if (!value) return true;
            return data.title.indexOf(value) !== -1;
        },
        //获取树列表
        getTree(){
            this.data = [];
            this.treeLoading = true;
            menuTree().then((res)=>{
                this.treeLoading = false;
                this.data = res.data;
            }).catch(()=>{
                this.treeLoading = false;
            });
        },
        //点击树节点
        clickNode(obj,node,components){
            this.currentNode = {
                obj: obj,
                node: node
            };
            this.form = JSON.parse(JSON.stringify(obj));
            delete this.form.children;
            console.log(this.form)
        },
        //新增节点
        addNode(){
            if(!this.nodeForm.label || this.nodeForm.label == ""){
                this.$Message.warning("节点名称不能为空");
                return;
            }
            if(!this.nodeForm.path || this.nodeForm.path == ""){
                this.$Message.warning("节点路由不能为空");
                return;
            }
            let param = {
                parent: this.currentNode ? this.currentNode.obj.id : "ROOT",
                label: this.nodeForm.label,
                path: this.nodeForm.path
            };
            this.btnLoading = true;
            addMenuNode(param).then((res)=>{
                this.btnLoading = false;
                if(res.code === 0){
                    this.addNodeVisible = false;
                    if(this.currentNode){
                        this.currentNode.obj.children ? this.currentNode.obj.children.push(res.data):
                        this.$set(this.currentNode.obj, 'children', [res.data]);
                        this.currentNode.node.expanded = true;
                    }else{
                        this.data.push(res.data);
                    }
                }else{
                    this.$Message.error(res.msg);
                }
            }).catch(()=>{
                this.btnLoading = false;
            });
        },
        //删除节点
        delNode(){
            if(!this.currentNode){
                this.$Message.warning("提示：请选择需要删除的【子节点】");
                return;
            }
            if(this.currentNode.node.data.children && this.currentNode.node.data.children.length>0){
                this.$Message.warning("提示：请从【子节点】开始删除");
                return;
            }
            this.$confirm('此操作将会永久删除该节点, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.treeLoading = true;
                delMenuNode({id: this.currentNode.obj.id}).then((res)=>{
                    this.treeLoading = false;
                    if(res.code === 0){
                        this.currentNode.node.remove();
                        this.form = [];
                        this.currentNode = null;
                        this.$message.success("提示：删除成功");
                    }else{
                        this.$Message.error(res.msg);
                    }
                }).catch(()=>{
                    this.treeLoading = false;
                });
            }).catch(() => {

            });
        },
        //修改节点信息
        handleSubmit(){
            this.btnLoading = true;
            this.contentLoading = true;
            saveMenuNode({data: JSON.stringify(this.form)}).then((res)=>{
                this.contentLoading = false;
                this.btnLoading = false;
                if(res.code === 0){
                    let node = this.$refs.treeBox.getCurrentNode();
                    node.title = this.form.title;//修改节点名称
                    this.$Message.success("提示：修改成功");
                }else{
                    this.$Message.error(res.msg);
                }
            }).catch(()=>{
                this.contentLoading = false;
                this.btnLoading = false;
            });
        },
    },
    mounted(){
        this.getTree();

        document.getElementById("tree-box").style.height = window.innerHeight-240+"px";
        document.getElementById("content-box").style.height = window.innerHeight-150+"px";
    }
}
</script>
<style>
    #tree-box{
        overflow-y: auto;
    }
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #409eff;
        color: white;
    }
</style>
